<template>
	<div :class="[layoutClass]">
		<GridLayout
			ref="gridLayout"
			v-model:layout="layout"
			:row-height="state.rowHeight"
			:col-num="state.colNum"
			:margin="state.margin"
			:cols="{ lg: 24, md: 12, sm: 6, xs: 4, xxs: 2 }"
			:responsive-layouts="presetLayouts"
			responsive
			:style="bgStyle"
			:is-draggable="false"
			:is-resizable="false"
		>
			<GridItem
				v-for="item in layout"
				:x="item.x"
				:y="item.y"
				:w="item.w"
				:h="item.h"
				:i="item.i"
				:key="item.i"
				:colNum="colNum"
			>
				<div class="grid-item">
					<component
						v-for="(comp, index) in item.children"
						:is="comp.category"
						:key="comp.category + '_' + index"
						:options="comp"
						:is-design="false"
						@operation="operationItem"
					/>
				</div>
			</GridItem>
		</GridLayout>
	</div>
</template>
<script setup lang="ts">
import { ref, computed, watch, nextTick, onMounted, toRef, reactive } from 'vue'
import {
	DocumentAdd,
	DeleteFilled,
	CopyDocument
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const gridReload = ref(false)
const state = reactive({
	rowHeight: 0,
	colNum: 0,
	margin: [10, 10],
	pageSize: 'lg'
})
// 当前布局数据
const layout = ref([])

// 不同分辨路时对应的数据
const presetLayouts = ref({
	lg: [],
	sm: [],
	xxs: []
})

const gridLayout = ref()

const setData = (data: any) => {
	Object.assign(state, data.config)
	presetLayouts.value = JSON.parse(JSON.stringify(data.data))
	layout.value = presetLayouts.value[state.pageSize]
}

const emptyData = () => {
	layout.value = []
	presetLayouts.value = {
		lg: [],
		sm: [],
		xxs: []
	}
}

defineExpose({ emptyData, setData })
</script>

<style lang="scss" scoped>
.vgl-layout {
	background: #f1f1f1;
	width: 100%;
	height: 100%;
}

:deep(.vgl-item:not(.vgl-item--placeholder)) {
	background-color: #fff;
	border: 1px #d8d8d8 dashed;
}
.grid-item {
	position: relative;
	height: 100%;
	width: 100%;
	border: none;
	display: flex;
	flex-direction: inherit;
	.delete-icon {
		position: absolute;
		right: 4px;
		top: 4px;
		z-index: 30;
		cursor: pointer;
		color: #f57474;
		&:hover {
			color: #ff9c9c;
		}
	}
	.copy-icon {
		position: absolute;
		right: 24px;
		top: 4px;
		z-index: 30;
		cursor: pointer;
		color: #409eff;
		&:hover {
			color: #79bbff;
		}
	}
}
.active-item {
	margin: -1px;
	border: 1px #409eff solid;
}

:deep(.vgl-item--resizing) {
	opacity: 90%;
}

:deep(.vgl-item--static) {
	background-color: #cce;
}

:deep(.vgl-item) {
	position: relative;
	height: 100%;
}
.nodata-tips {
	width: 100%;
	height: 100%;
	color: #999;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	position: relative;
	.nodata-content {
		position: absolute;
		top: 50%;
		margin-top: -27px;
		text-align: center;
		width: 100%;
	}
	.nodata-icon {
		display: block;
		width: 100%;
		font-size: 24px;
		margin-bottom: 8px;
	}
}
</style>
